<template>
  <div>
    <van-cell-group title="基础展示" inset>
      <van-cell
        title="基础弹窗"
        clickable
        @click="
          onOpen({
            title: '随便啦',
            message:
              '上海卫健委主任邬惊雷指出，近期发生的本土疫情再次表明，疫情防控这根弦必须始终绷紧，不能有丝毫麻痹懈怠和侥幸松劲。',
          })
        "
      />
      <van-cell
        title="基础弹窗(无标题)"
        clickable
        @click="
          onOpen({
            message:
              '上海卫健委主任邬惊雷指出，近期发生的本土疫情再次表明，疫情防控这根弦必须始终绷紧，不能有丝毫麻痹懈怠和侥幸松劲。',
          })
        "
      />
      <van-cell
        title="确认弹窗"
        clickable
        @click="
          onOpen({
            title: '确认弹窗',
            showCancelButton: true,
            message:
              '上海卫健委主任邬惊雷指出，近期发生的本土疫情再次表明，疫情防控这根弦必须始终绷紧，不能有丝毫麻痹懈怠和侥幸松劲。',
          })
        "
      />
      <van-cell
        title="domString"
        clickable
        @click="
          onOpen({
            title: '确认弹窗',
            showCancelButton: true,
            message:
              '<p>上海卫健委主任邬惊雷指</p><h2>近期发生的本土疫情再次表明</h2><h3>疫情防控这根弦必须始终绷紧</h3><span>不能有丝毫麻痹懈怠和侥幸松劲。</span>',
          })
        "
      />
      <van-cell
        title="异步关闭"
        clickable
        @click="
          onOpen({
            title: '异步关闭',
            showCancelButton: true,
            beforeClose,
            message:
              '上海卫健委主任邬惊雷指\n近期发生的本土疫情再次表明\n疫情防控这根弦必须始终绷紧\n不能有丝毫麻痹懈怠和侥幸松劲。',
          })
        "
      />
    </van-cell-group>
  </div>
</template>

<script>
// import XrkMessageBox from "../components/XrkMessageBox/Instance";
export default {
  name: "message",
  methods: {
    onOpen(options) {
      this.$messageBox(options)
        .then((confitm) => {
          console.log(confitm);
        })
        .catch((cancel) => {
          console.log(cancel);
        });
    },
    beforeClose(action, done) {
      if (action === "confirm") {
      setTimeout(() => {
        done();
      }, 5000);
      } else {
        done();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>